<template>
    <div class="home-page">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="welcome-card">
                    <div class="welcome-content">
                        <h1>欢迎回来，{{ user.nickname }}</h1>
                        <p>{{ greeting }}</p>
                    </div>
                    <div class="welcome-image">
                        <img src="~assets/img/welcome.png" alt="欢迎">
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mt-20">
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" v-for="(card, index) in dataCards" :key="index">
                <div class="data-card" :style="`background: ${card.bgColor}`">
                    <div class="card-icon">
                        <el-icon>
                            <component :is="card.icon"></component>
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-title">{{ card.title }}</div>
                        <div class="card-value">
                            {{ card.value }}
                            <span class="card-change" :class="card.status">
                                <el-icon>
                                    <component :is="card.status === 'up' ? 'CaretTop' : 'CaretBottom'"></component>
                                </el-icon>
                                {{ card.change }}%
                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mt-20">
            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                <div class="video-trend chart-card">
                    <div class="chart-header">
                        <div class="chart-title">
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            <span>视频上传趋势</span>
                        </div>
                        <el-radio-group v-model="chartTimeRange" size="small">
                            <el-radio-button label="week">本周</el-radio-button>
                            <el-radio-button label="month">本月</el-radio-button>
                            <el-radio-button label="year">全年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="chart-content" ref="videoChartRef">
                        <!-- 图表将在这里渲染 -->
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <div class="category-stats chart-card">
                    <div class="chart-header">
                        <div class="chart-title">
                            <el-icon>
                                <PieChart />
                            </el-icon>
                            <span>视频分类统计</span>
                        </div>
                    </div>
                    <div class="chart-content" ref="categoryChartRef">
                        <!-- 图表将在这里渲染 -->
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mt-20">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <div class="pending-reviews module-card">
                    <div class="module-header">
                        <div class="module-title">
                            <el-icon>
                                <WarningFilled />
                            </el-icon>
                            <span>待审核内容</span>
                        </div>
                        <el-button type="primary" link @click="goToReview">查看全部</el-button>
                    </div>
                    <div class="module-content" v-loading="reviewLoading">
                        <template v-if="pendingReviews.length > 0">
                            <div class="review-item" v-for="item in pendingReviews" :key="item.id">
                                <div class="item-info">
                                    <div class="item-title" :title="item.title">{{ item.title }}</div>
                                    <div class="item-meta">
                                        <span class="item-type">{{ item.type === 'video' ? '视频' : '评论' }}</span>
                                        <span class="item-time">{{ formatDate(item.createTime) }}</span>
                                    </div>
                                </div>
                                <div class="item-actions">
                                    <el-button type="primary" size="small" @click="handleReview(item)">审核</el-button>
                                </div>
                            </div>
                        </template>
                        <el-empty v-else description="暂无待审核内容"></el-empty>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <div class="latest-activities module-card">
                    <div class="module-header">
                        <div class="module-title">
                            <el-icon>
                                <Timer />
                            </el-icon>
                            <span>最新用户活动</span>
                        </div>
                        <span class="update-time">更新于 {{ formatTime(new Date()) }}</span>
                    </div>
                    <div class="module-content" v-loading="activitiesLoading">
                        <template v-if="userActivities.length > 0">
                            <div class="activity-item" v-for="item in userActivities" :key="item.id">
                                <div class="activity-user">
                                    <div class="user-avatar">{{ item.username.substring(0, 1) }}</div>
                                    <div class="user-name">{{ item.username }}</div>
                                </div>
                                <div class="activity-content">
                                    <div class="activity-action">{{ item.action }}</div>
                                    <div class="activity-detail">{{ item.content }}</div>
                                    <div class="activity-time">{{ item.time }}</div>
                                </div>
                            </div>
                        </template>
                        <el-empty v-else description="暂无用户活动"></el-empty>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- 新增热门视频展示部分 -->
        <el-row :gutter="20" class="mt-20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="hot-videos module-card">
                    <div class="module-header">
                        <div class="module-title">
                            <el-icon>
                                <VideoPlay />
                            </el-icon>
                            <span>热门视频</span>
                        </div>
                        <el-radio-group v-model="hotVideoTimeRange" size="small">
                            <el-radio-button label="week">近一周</el-radio-button>
                            <el-radio-button label="month">近一月</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="module-content" v-loading="hotVideosLoading">
                        <el-row :gutter="20" v-if="hotVideos.length > 0">
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="video in hotVideos"
                                :key="video.id">
                                <div class="video-card">
                                    <div class="video-cover">
                                        <img :src="video.coverUrl || require('@/assets/img/default-cover.png')"
                                            alt="视频封面" @error="handleImageError($event)">
                                        <div class="video-info">
                                            <span class="video-views"><el-icon>
                                                    <View />
                                                </el-icon> {{ formatNumber(video.views) }}</span>
                                        </div>
                                    </div>
                                    <div class="video-title" :title="video.title">{{ video.title }}</div>
                                    <div class="video-author">
                                        <span>{{ video.author }}</span>
                                        <span class="video-time">{{ formatDate(video.uploadDate) }}</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-empty v-else description="暂无热门视频"></el-empty>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref, onMounted, onUnmounted, reactive, computed, nextTick } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { get } from '@/network/request';
import * as echarts from 'echarts';
import {
    VideoCameraFilled, DocumentChecked, User, ChatLineRound,
    CaretTop, CaretBottom, TrendCharts, PieChart,
    Timer, WarningFilled, VideoPlay, View
} from '@element-plus/icons-vue';

export default {
    name: "HomePage",
    components: {
        VideoCameraFilled, DocumentChecked, User, ChatLineRound,
        CaretTop, CaretBottom, TrendCharts, PieChart,
        Timer, WarningFilled, VideoPlay, View
    },
    setup() {
        const store = useStore();
        const router = useRouter();
        const videoChartRef = ref(null);
        const categoryChartRef = ref(null);
        const videoChart = ref(null);
        const categoryChart = ref(null);
        const chartTimeRange = ref('week');
        const reviewLoading = ref(false);
        const activitiesLoading = ref(false);

        // 热门视频相关
        const hotVideoTimeRange = ref('week');
        const hotVideosLoading = ref(false);
        const hotVideos = ref([]);

        // 用户信息
        const user = computed(() => store.state.user);

        // 欢迎语
        const greeting = computed(() => {
            const hour = new Date().getHours();
            if (hour < 6) return '夜深了，注意休息哦';
            if (hour < 9) return '早上好，新的一天开始啦';
            if (hour < 12) return '上午好，工作顺利';
            if (hour < 14) return '中午好，记得午休哦';
            if (hour < 18) return '下午好，继续努力';
            if (hour < 22) return '晚上好，辛苦了';
            return '夜深了，注意休息哦';
        });

        // 数据卡片
        const dataCards = reactive([
            {
                title: '今日上传视频',
                value: 0,
                change: '0.0',
                status: 'up',
                icon: 'VideoCameraFilled',
                bgColor: 'linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)'
            },
            {
                title: '待审核视频',
                value: 0,
                change: '0.0',
                status: 'up',
                icon: 'DocumentChecked',
                bgColor: 'linear-gradient(120deg, #f093fb 0%, #f5576c 100%)'
            },
            {
                title: '今日活跃用户',
                value: 0,
                change: '0.0',
                status: 'up',
                icon: 'User',
                bgColor: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)'
            },
            {
                title: '今日新增评论',
                value: 0,
                change: '0.0',
                status: 'down',
                icon: 'ChatLineRound',
                bgColor: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)'
            }
        ]);

        // 待审核内容
        const pendingReviews = ref([]);

        // 最新用户活动
        const userActivities = ref([]);

        // 初始化图表
        const initCharts = () => {
            nextTick(() => {
                // 视频上传趋势图表
                if (videoChartRef.value) {
                    videoChart.value = echarts.init(videoChartRef.value);
                    updateVideoChart();
                }

                // 视频分类统计图表
                if (categoryChartRef.value) {
                    categoryChart.value = echarts.init(categoryChartRef.value);
                    updateCategoryChart();
                }
            });
        };

        // 更新视频上传趋势图表
        const updateVideoChart = async () => {
            try {
                const res = await get('/admin/dashboard/video/trends', { params: { type: chartTimeRange.value } });
                if (res.data.code === 200 && videoChart.value) {
                    const data = res.data.data || { dates: [], values: [] };

                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.dates,
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                                formatter: function (value) {
                                    return value;
                                }
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '上传视频数',
                                type: 'line',
                                smooth: true,
                                lineStyle: {
                                    color: '#8a2be2',
                                    width: 3
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgba(138, 43, 226, 0.5)' },
                                        { offset: 1, color: 'rgba(138, 43, 226, 0.1)' }
                                    ])
                                },
                                data: data.values
                            }
                        ]
                    };

                    videoChart.value.setOption(option);
                }
            } catch (error) {
                console.error('获取视频趋势数据失败', error);
            }
        };

        // 更新视频分类统计图表
        const updateCategoryChart = async () => {
            try {
                const res = await get('/admin/dashboard/category/stats');
                if (res.data.code === 200 && categoryChart.value) {
                    const data = res.data.data || [];

                    const option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 10,
                            top: 'center',
                            data: data.map(item => item.name)
                        },
                        series: [
                            {
                                name: '视频分类',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '14',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: data
                            }
                        ]
                    };

                    categoryChart.value.setOption(option);
                }
            } catch (error) {
                console.error('获取分类统计数据失败', error);
            }
        };

        // 获取统计数据
        const fetchStatsData = async () => {
            try {
                const res = await get('/admin/dashboard/stats');
                if (res.data.code === 200) {
                    const stats = res.data.data || {};

                    if (stats.todayUploads !== undefined) {
                        dataCards[0].value = stats.todayUploads;
                        dataCards[0].change = stats.todayUploadsChange || '0.0';
                        dataCards[0].status = parseFloat(stats.todayUploadsChange) >= 0 ? 'up' : 'down';
                    }

                    if (stats.pendingReviews !== undefined) {
                        dataCards[1].value = stats.pendingReviews;
                        dataCards[1].change = stats.pendingReviewsChange || '0.0';
                        dataCards[1].status = parseFloat(stats.pendingReviewsChange) >= 0 ? 'up' : 'down';
                    }

                    if (stats.activeUsers !== undefined) {
                        dataCards[2].value = stats.activeUsers;
                        dataCards[2].change = stats.activeUsersChange || '0.0';
                        dataCards[2].status = parseFloat(stats.activeUsersChange) >= 0 ? 'up' : 'down';
                    }

                    if (stats.todayComments !== undefined) {
                        dataCards[3].value = stats.todayComments;
                        dataCards[3].change = stats.todayCommentsChange || '0.0';
                        dataCards[3].status = parseFloat(stats.todayCommentsChange) >= 0 ? 'up' : 'down';
                    }
                }
            } catch (error) {
                console.error('获取统计数据失败', error);
            }
        };

        // 获取待审核内容
        const fetchPendingReviews = async () => {
            reviewLoading.value = true;
            try {
                const res = await get('/admin/dashboard/pending/reviews', { params: { limit: 5 } });
                if (res.data.code === 200) {
                    pendingReviews.value = res.data.data || [];
                }
            } catch (error) {
                console.error('获取待审核内容失败', error);
                pendingReviews.value = [];
            } finally {
                reviewLoading.value = false;
            }
        };

        // 获取最新用户活动
        const fetchUserActivities = async () => {
            activitiesLoading.value = true;
            try {
                const res = await get('/admin/dashboard/latest/activities', { params: { limit: 5 } });
                if (res.data.code === 200) {
                    userActivities.value = res.data.data || [];
                }
            } catch (error) {
                console.error('获取最新用户活动失败', error);
                userActivities.value = [];
            } finally {
                activitiesLoading.value = false;
            }
        };

        // 获取热门视频
        const fetchHotVideos = async () => {
            hotVideosLoading.value = true;
            try {
                const res = await get('/admin/dashboard/hot/videos', {
                    params: { timeRange: hotVideoTimeRange.value, limit: 8 }
                });
                if (res.data.code === 200) {
                    hotVideos.value = res.data.data || [];
                }
            } catch (error) {
                console.error('获取热门视频失败', error);
                hotVideos.value = [];
            } finally {
                hotVideosLoading.value = false;
            }
        };

        // 格式化日期
        const formatDate = (date) => {
            if (!date) return '';
            const d = new Date(date);
            return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
        };

        // 格式化时间
        const formatTime = (date) => {
            if (!date) return '';
            const d = new Date(date);
            return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
        };

        // 格式化数字（如：10000 -> 1万）
        const formatNumber = (num) => {
            if (num >= 10000) {
                return (num / 10000).toFixed(1) + '万';
            }
            return num;
        };

        // 处理图片加载错误
        const handleImageError = (event) => {
            event.target.src = require('@/assets/img/default-cover.png');
        };

        // 获取状态颜色
        const getStatusColor = (value) => {
            if (value < 50) return '#67C23A';
            if (value < 80) return '#E6A23C';
            return '#F56C6C';
        };

        // 前往审核页面
        const goToReview = () => {
            router.push('/review/video');
        };

        // 处理审核操作
        const handleReview = (item) => {
            if (item.type === 'video') {
                router.push(`/review/video?id=${item.id}`);
            } else if (item.type === 'comment') {
                router.push(`/review/comment?id=${item.id}`);
            }
        };

        // 监听图表容器大小变化
        const handleResize = () => {
            if (videoChart.value) videoChart.value.resize();
            if (categoryChart.value) categoryChart.value.resize();
        };

        // 监听时间范围变化
        const watchChartTimeRange = () => {
            updateVideoChart();
        };

        // 监听热门视频时间范围变化
        const watchHotVideoTimeRange = () => {
            fetchHotVideos();
        };

        onMounted(() => {
            initCharts();
            fetchStatsData();
            fetchPendingReviews();
            fetchUserActivities();
            fetchHotVideos();

            window.addEventListener('resize', handleResize);
        });

        // 组件卸载时清理事件监听器
        onUnmounted(() => {
            window.removeEventListener('resize', handleResize);
            if (videoChart.value) {
                videoChart.value.dispose();
            }
            if (categoryChart.value) {
                categoryChart.value.dispose();
            }
        });

        return {
            user,
            greeting,
            dataCards,
            pendingReviews,
            userActivities,
            hotVideoTimeRange,
            hotVideos,
            hotVideosLoading,
            videoChartRef,
            categoryChartRef,
            chartTimeRange,
            reviewLoading,
            activitiesLoading,
            formatDate,
            formatTime,
            formatNumber,
            getStatusColor,
            goToReview,
            handleReview,
            watchChartTimeRange,
            watchHotVideoTimeRange,
            handleImageError
        };
    },
    watch: {
        chartTimeRange() {
            this.watchChartTimeRange();
        },
        hotVideoTimeRange() {
            this.watchHotVideoTimeRange();
        }
    }
}
</script>

<style scoped>
.home-page {
    padding: 20px;
}

.mt-20 {
    margin-top: 20px;
}

/* 欢迎卡片 */
.welcome-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.welcome-content h1 {
    font-size: 24px;
    color: var(--text1);
    margin: 0;
    font-weight: 600;
}

.welcome-content p {
    font-size: 16px;
    color: var(--text2);
    margin-top: 8px;
}

.welcome-image {
    height: 80px;
    flex: 0 0 auto;
}

.welcome-image img {
    height: 100%;
    object-fit: contain;
}

/* 数据卡片 */
.data-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    display: flex;
    align-items: center;
    color: white;
    height: 100px;
    margin-bottom: 20px;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.card-icon .el-icon {
    font-size: 30px;
}

.card-info {
    flex: 1;
}

.card-title {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.card-value {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.card-change {
    font-size: 14px;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
}

.card-change .el-icon {
    margin-right: 2px;
    font-size: 14px;
}

.card-change.up {
    color: #6de57a;
}

.card-change.down {
    color: #ff7875;
}

/* 图表卡片 */
.chart-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 20px;
    height: 350px;
    display: flex;
    flex-direction: column;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-title {
    display: flex;
    align-items: center;
    color: var(--text1);
    font-size: 16px;
    font-weight: 600;
}

.chart-title .el-icon {
    font-size: 20px;
    margin-right: 8px;
}

.chart-content {
    flex: 1;
    width: 100%;
}

/* 模块卡片 */
.module-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 20px;
    height: 350px;
    display: flex;
    flex-direction: column;
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.module-title {
    display: flex;
    align-items: center;
    color: var(--text1);
    font-size: 16px;
    font-weight: 600;
}

.module-title .el-icon {
    font-size: 20px;
    margin-right: 8px;
}

.module-content {
    flex: 1;
    overflow-y: auto;
}

/* 隐藏滚动条 */
.module-content::-webkit-scrollbar {
    display: none;
}

.module-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 待审核项 */
.review-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.review-item:last-child {
    border-bottom: none;
}

.item-info {
    flex: 1;
    overflow: hidden;
}

.item-title {
    font-size: 14px;
    color: var(--text1);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-meta {
    font-size: 12px;
    color: var(--text3);
    display: flex;
    align-items: center;
}

.item-type {
    background-color: var(--graph_bg_regular);
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 8px;
}

.item-actions {
    margin-left: 16px;
}

/* 用户活动 */
.activity-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-user {
    margin-right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.user-name {
    font-size: 12px;
    color: var(--text2);
    width: 60px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-content {
    flex: 1;
    overflow: hidden;
}

.activity-action {
    font-size: 14px;
    color: var(--text1);
    font-weight: 500;
    margin-bottom: 4px;
}

.activity-detail {
    font-size: 13px;
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.activity-time {
    font-size: 12px;
    color: var(--text3);
}

/* 热门视频 */
.hot-videos {
    height: auto;
    min-height: 350px;
    max-height: none;
}

.video-card {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    cursor: pointer;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
}

.video-cover {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* 16:9 比例 */
    overflow: hidden;
}

.video-cover img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.video-info {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-top-left-radius: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.video-info .el-icon {
    margin-right: 4px;
    font-size: 14px;
}

.video-title {
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-author {
    padding: 0 10px 10px;
    font-size: 12px;
    color: var(--text3);
    display: flex;
    justify-content: space-between;
}

.video-time {
    color: var(--text3);
}
</style>